<template>
	<div>
		<div style="margin-top: 15px;margin-bottom: 5px;">
			<el-radio-group
				v-model="tabPosition"
				style="margin-bottom: 10px;"
				size="small"
			>
				<!-- @change.native="getProxyPersonData" -->
				<el-radio-button label="person">
					个人
				</el-radio-button>
				<!-- @change.native="getProxyTeamData" -->
				<el-radio-button label="team">
					团队
				</el-radio-button>
			</el-radio-group>
		</div>
		<div>
			<template v-if="tabPosition === 'person'">
				<DataProxyPersonPeriod
					:billDetail="currentBillDetail"
				></DataProxyPersonPeriod>
				<DataProxyPersonPeriod
					periodType="last"
					:billDetail="lastBillDetail"
				></DataProxyPersonPeriod>
				<div class="item-show">
					<div class="item-content">
						<el-row>
							<el-col :span="5">
								<span>代理个人收益</span>
								<i
									v-if="isJump && hasPermission('702020')"
									class="el-icon-arrow-right"
									@click="
										handleJump({
											path:
												'/funds/proxyFundsRecord/proxyIncomeRecord'
										})
									"
								></i>
								<div class="show-money-url">
									{{
										handleNumber(
											currentBillDetail.currency,
											currentBillDetail.personIncomeAmount
										)
									}}
								</div>
							</el-col>
							<!-- <el-col :span="5">
								<span>总取款</span>
								<i
									v-if="isJump && hasPermission('702020')"
									class="el-icon-arrow-right"
									@click="
										handleJump({
											path:
												'/report/businessReport/proxyReport'
										})
									"
								></i>
								<div class="show-money-url">
									{{
										handleNumber(
											currentBillDetail.currency,
											currentBillDetail.totalWithdrawAmount
										)
									}}
								</div>
							</el-col> -->
						</el-row>
					</div>
				</div>
				<div>
					<el-tag class="tag-content">直属会员</el-tag>
				</div>
				<DataMemberBill
					:isJump="isJump"
					:isProxy="true"
					:billDetail="directlyBillDetail"
				></DataMemberBill>
			</template>

			<template v-if="tabPosition === 'team'">
				<DataProxyTeamPeriod
					:billDetail="currentBillDetail"
				></DataProxyTeamPeriod>
				<DataProxyTeamPeriod
					periodType="last"
					:billDetail="lastBillDetail"
				></DataProxyTeamPeriod>
				<div>
					<el-tag class="tag-content">全部会员</el-tag>
				</div>
				<DataMemberBill
					:isJump="false"
					:isProxy="true"
					:billDetail="currentBillDetail"
				></DataMemberBill>
			</template>
		</div>
	</div>
</template>

<script>
import DataMemberBill from '@/components/Funds/SettlementBillDetail/DataMemberBill'
import DataProxyPersonPeriod from '@/components/Funds/SettlementBillDetail/DataProxyPersonPeriod'
import DataProxyTeamPeriod from '@/components/Funds/SettlementBillDetail/DataProxyTeamPeriod'
import list from '@/mixins/list'
export default {
	components: { DataMemberBill, DataProxyPersonPeriod, DataProxyTeamPeriod },
	mixins: [list],
	props: {
		currentBillDetail: {
			type: Object,
			default: () => {
				return {}
			}
		},
		lastBillDetail: {
			type: Object,
			default: () => {
				return {}
			}
		}
	},
	data() {
		return {
			isJump: false,
			tabPosition: 'person'
		}
	},
	computed: {
		directlyBillDetail() {
			const directlyMemberBill = {
				validBetAmount: this.currentBillDetail
					.directlyMemberValidBetAmount, // 总有效投注
				netAmount: this.currentBillDetail.directlyMemberNetAmount, // 游戏输赢
				betCount: this.currentBillDetail.directlyMemberBetCount, // 总注单
				memberRebateAmount: this.currentBillDetail
					.directlyMemberRebateAmount, // 总返水
				memberDepositAmount: this.currentBillDetail
					.directlyMemberDepositAmount, // 总存款
				memberWithdrawAmount: this.currentBillDetail
					.directlyMemberWithdrawAmount, // 总取款
				memberLoan: this.currentBillDetail.directlyMemberLoanAmount, // 总借款
				memberRepayment: this.currentBillDetail
					.directlyMemberRepaymentAmount // 总还款
			}
			const billObj = Object.assign(
				{},
				this.currentBillDetail,
				directlyMemberBill
			)
			return billObj
		}
	},
	mounted() {
		if (this.currentBillDetail?.billId) {
			this.isJump = true
		}
	},
	methods: {
		handleJump(obj) {
			obj.query = {
				userName: this.currentBillDetail.userName,
				startDate: this.currentBillDetail.reportStDate,
				endDate: this.currentBillDetail.reportEnDate
			}
			this.$router.push(obj)
		}
	}
}
</script>
<style lang="scss" scoped>
.tag-content {
	background-color: #000000;
	color: #ffffff;
	border-radius: unset;
	font-weight: 700;
	font-size: 13px;
	margin-bottom: 20px;
}
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
	background-color: #000000;
	border-color: #000000;
}
::v-deep .el-radio-button .el-radio-button__inner {
	border-radius: unset;
	font-weight: 700;
	font-size: 13px;
}
::v-deep .el-radio-button--small .el-radio-button__inner {
	padding: 9px 27px;
}
.item-show {
	width: 100%;
	min-height: 80px;
	margin-right: 10px;
	margin-bottom: 20px;
	border-color: #bebebe;
	border-style: solid;
	border-width: 1px;
	border-radius: 5px;
	.item-title {
		color: #6a6a6a;
		font-size: 18px;
		font-weight: 900;
		margin-left: 10px;
		margin-top: 10px;
	}
	.item-content {
		margin-left: 10px;
		margin-top: 5px;
		margin-bottom: 5px;
		i {
			cursor: pointer;
		}
		span {
			line-height: 3;
		}
		.item-row-content {
			word-wrap: break-word;
			.item-row-five {
				min-width: 19%;
				display: inline-block;
			}
			.item-row-six {
				min-width: 16%;
				display: inline-block;
			}
		}
		.show-money {
			font-size: 15px;
			padding-left: 5px;
			color: black;
		}
		.show-money-url {
			font-size: 14px;
			color: black;
		}
	}
}
</style>
